<template>
<div class="container">
  <div class="row" v-show="show">
    <monitor-tree></monitor-tree>
  </div>  
</div>
</template>

<script>
import _ from 'lodash'
import async from 'async'
import ebus from 'libs/ebus.js'
import store from 'share/server/vuex/store.js'
import {getQueryStringArgs} from 'libs/utils.js'
import {encryptPassword} from 'share/server/utils.js'
import {getPlatformInfo, tryLogin} from 'share/server/vuex/actions/system.js'
import {doLoadMtSrcs} from 'share/server/vuex/actions/streamsrc.js'
import {doLoadMonitors} from 'share/server/vuex/actions/media.js'
import MonitorTree from 'share/server/components/MonitorTree.vue'

export default {
  store,
  components: {
    'monitor-tree': MonitorTree
  },
  vuex: {
    getters: {
      monitor: (state) => state.monitor
    },
    actions: {
      getPlatformInfo,
      tryLogin,
      doLoadMtSrcs,
      doLoadMonitors
    }
  },
  data () {
    return {
      show: false,
      monitorName: ''     
    }
  },
  watch: {
    'show': function(newVal, oldVal) {
      if (!newVal) {
        this.onConnect()
      }
    }
  },
  methods: {
    encryptPassword (plaintext) {
      //兼容旧版本，待废弃
      if (plaintext === 'admin') {
        return plaintext
      } else {
        return encryptPassword(plaintext)
      }   
    },
    stepGetPlatformInfo (cb) {
      let ctx = this
      this.getPlatformInfo({
        success () {
          cb(null)
        },
        error (data) {
          cb('get platform info error')
        },
        noResponse () {
          cb('get platform info noResponse')
        }
      })
    },
    stepLogin (cb) {
      let verify = {
        username: 'admin',
        password: 'admin'
      }
      let ctx = this
      let req = {
        username: verify.username,
        password: this.encryptPassword(verify.password),
        code: ''
      }

      this.tryLogin(req, {
        success () {
          cb(null)
        },
        error (data) {
          cb('login error')
        },
        noResponse () {
          cb('login noResponse')
        }
      })      
    },
    stepLoadMonitorInfo (cb) {
      this.doLoadMtSrcs()
      this.doLoadMonitors()
      cb(null)
    },    
    onConnect () {
      async.waterfall([
        this.stepGetPlatformInfo,
        this.stepLogin,
        this.stepLoadMonitorInfo,
        ], 
        function (err) {
          if (err) {
            console.log(err)
            setTimeout(this.onConnect, 3000)
          }
        }.bind(this)
      )
    },
    loseConnection () {
      this.show = false
    }
  },
  ready () {
    ebus.on('lose-connection', this.loseConnection)
    ebus.on('set-monitors', function() {
      let currMonitor = _.find(this.monitor.list, {name: this.monitorName})
      if (currMonitor) {
        ebus.emit('monitor-tree-update', currMonitor)
        this.show = true
      }
    }.bind(this))
    let args = getQueryStringArgs()
    if (args && args['name']) {
      this.monitorName = args['name']
      this.onConnect()
    } else {
      console.log('args:' + args)
    }
  }
}
</script>

<style>
html {
  overflow: auto
}
</style>